/*
 * @Author: hongbin
 * @Date: 2023-08-09 17:05:17
 * @LastEditors: hongbin
 * @LastEditTime: 2023-08-10 16:04:52
 * @Description:
 */
import { FC } from "react";
import * as THREE from "three";
import { ThreeHelper } from "@/ThreeHelper";
import Layout from "@/components/Three/Layout";
import { RingPoint } from "@/components/particle/RingPoint";
import { gsap } from "gsap";

interface IProps {}

const Index: FC<IProps> = () => {
    return (
        <Layout seoTitle={"Ring Point"} init={init} destroy={Main.destroy} />
    );
};

export default Index;

function init(helper: ThreeHelper) {
    // helper.addAxis();
    // helper.frameByFrame();
    // helper.camera.position.set(0, 0, 30);
    // helper.useRoomEnvironment();

    // const ringPoint = new RingPoint();
    // helper.add(ringPoint.math);
    Main.init(helper);
}

class Main {
    static init(helper: ThreeHelper) {
        helper.addAxis();
        helper.frameByFrame();
        helper.camera.position.set(0, 0, 30);
        helper.useRoomEnvironment();
        window.document.body.style.height = "300vh";
        const { ScrollTrigger } = require("gsap/ScrollTrigger");
        const { ScrollToPlugin } = require("gsap/ScrollToPlugin");
        gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

        const ringConfig = [{ z: 0 }, { z: 7 }, { z: 12 }, { z: 15 }];
        const pos: Vector3[] = [];

        for (const { z } of ringConfig) {
            const ringPoint = new RingPoint();
            ringPoint.math.position.z = z;
            helper.add(ringPoint.math);
            pos.unshift(ringPoint.math.position);
        }
        const timeline = gsap.timeline({
            scrollTrigger: {
                trigger: window,
                start: 0,
                end: 300,
                scrub: 1,
                onUpdate: ({ progress }) => {},
            },
        });
        timeline.to(pos, {
            z: 30,
            // yoyo: true,
            // repeat: -1,
            ease: "power3.inOut",
            duration: 2,
            stagger: {
                each: 0.2,
            },
        });
    }

    static destroy() {
        //  destroyEvent.forEach((destroy) => destroy())
    }
}
